<%--
  Created by IntelliJ IDEA.
  User: 23827
  Date: 2019/9/22
  Time: 21:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>centerinstall</title>

    <link rel="stylesheet" href="../css/user/centerNumber.css" type="text/css">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
</head>

<body>

<%@ include file="../common/nav.jsp"%>

<!-- 第三层信息填写 -->
<div style="overflow: hidden;margin-top: 50px">
    <!-- 左边 -->
    <div id="left">
        <a href="centerEdit.jsp" class="list-group-item active">
            实名认证
        </a>
        <a href="centerRecord.jsp"  class="list-group-item">服务记录</a>
        <a href="centerNumber.jsp" class="list-group-item">手机绑定</a>
        <a href="centerAddress.jsp" class="list-group-item">地址管理</a>
        <a href="centerPassword.jsp" class="list-group-item">密码管理</a>
    </div>
    <!-- 右边 -->
    <div id="right">
        <!-- 右边第一层 -->
        <div id="right-first">
            <h4 id="characters1">号码绑定</h4>
        </div>
        <!-- 右边第二层 -->
        <div>
            <p id="characters2">您绑定的手机号码为:</p>
            <p id="number">188****6502</p>
        </div>
        <!-- 右边第三层 -->
        <div id="third">
            <p>绑定手机的作用:</p>
            <p id="cahracters3">1、作为用户名,直接使用"手机号码"登录到闲时网</p>
            <p id="cahracters3">2、重要消息,订单状态及时接受短信通知</p>
            <p id="cahracters3">3、通过手机短信快速找回密码</p>
        </div>
        <!-- 右边第四层 -->
        <div>
            <button type="button" class="btn btn-primary" id="button-3" data-toggle="modal"
                    data-target="#myModal">修改号码</button>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel" style="margin-left: 22px">修改手机号码</h4>
                    </div>
                    <div>
                        <p id="right-1">*</p>
                        <p id="right-2">请输入新的手机号码</p><br><br><br>
                        <input type="text" id="righttext-1">
                    </div>
                    <div>
                        <p id="right-1">*</p>
                        <p id="right-2">短信验证码:</p><br><br><br>
                        <input type="text" id="righttext-1">
                        <button type="button" class="btn btn-primary" id="button-4" style="margin-left: 20px">获取验证码</button>
                    </div><br><br>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="button-5">确定提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

    </div>
</div>
<%@ include file="../common/footer.jsp"%>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>
</body>

</html>